<template>
     <div class="wrap">
        <div class="wrapBox">
            <div class="box">
                <img src="@/assets/2.jpg" alt="" class="head_png">
            <div class="author"><span>{{parentData.user.nickname}}</span><p class="time">1个小时前</p></div>
            </div>
            <i class="followBtn" @click="$emit('clicked',parentData.id)">回复</i>
        </div>

         <div class="info">
              <CommentsDom v-if="parentData.parent" :parentData="parentData.parent" @parentCallReply="acceptId"/>
             <div class="first">
                 {{parentData.content}}
             </div>
         </div>
     </div>
</template>

<script>
import CommentsDom from '@/components/comments/CommentsDom.vue'

export default {
    components:{
        CommentsDom
    },
    props:['parentData'],
    
    methods:{
        acceptId(id){
            // console.log('点击了');
            // console.log(id);
            this.$emit('clicked',id)
        }
    }
    
}
</script>

<style lang="less" scoped>
.wrap {
    padding: 15/360 * 100vw 10/360 * 100vw;
    border-bottom: 1/360*100vw solid #afafaf;
    .wrapBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .box {
        display: flex;
        align-items: center;
        margin-bottom: 10/360*100vw;
        .head_png {
            width: 40/360*100vw;
            height: 40/360*100vw;
            border-radius: 50%;
        }
        .author {
            margin-left: 10/360*100vw;
            .time {
                font-size: 10/360*100vw;
                color: #afafaf;
            }
        }
    }
    .followBtn {
            font-size: 12/360*100vw;
            color: #afafaf;
        }
  
}


// 评论
.first {
    margin-top: 10/360*100vw;
}
}
</style>